<template>
  <div>
    <Breadcrumb></Breadcrumb>
    <div id="fullscreen" class="_layout_main_">

        <!--搜索-->
        <a-form
            ref="searchForm"
            layout="inline"
            :model="form.defSearch"
            :rules="form.defSearchRules"
            style="display: flex;flex-wrap:wrap;padding: 24px"
            class="go_shadow go_radius _search_from_">

          <a-form-item label="ID" name="id" class="_230w">
            <a-input v-model:value="form.defSearch.id" placeholder="请输入唯一ID" :allowClear="true"></a-input>
          </a-form-item>

          <a-form-item label="角色名" name="role_name" class="_300w">
            <a-auto-complete
                v-model:value="form.defSearch.role_name"
                placeholder="请输入角色名称"
                :allowClear="true"
                :options="auto.role_name"
                @keyup.enter.prevent="queryPage_"
                @search="(value) => { searchAsync_( value, 'role_name' )}"
            >
              <template #option="item">
                <div @click="searchSelect_(item.name,'role_name',item)"> {{ item.name }}</div>
              </template>
            </a-auto-complete>
          </a-form-item>

          <a-form-item label="描述" name="des" class="_330w">
            <a-input v-model:value="form.defSearch.des" placeholder="请输入描述信息" :allowClear="true"></a-input>
          </a-form-item>

          <div style="flex: 1 1 0;"/>

          <a-form-item style="margin-right: 0">
            <a-button type="primary" @click="queryPage_">查询</a-button>
            <a-button style="margin-left: 10px" @click="()=>{ resetForm_('searchForm'); }">重置</a-button>
          </a-form-item>

        </a-form>

        <!--表格选项-->
        <div style="display: flex ; align-items: center;padding: 18px 24px"
             class="_magt20 go_shadow go_radius _tools_">
          <div style="color: rgba(0,0,0,.85);font-size: 16px;">查询表格</div>

          <div style="flex: 1 1 0"></div>

          <a-button type="primary" ghost size="small" @click="openAdd_(null)">新建</a-button>

          <a-divider type="vertical"/>

          <a-tooltip placement="top">
            <template #title>
              <span>批量删除</span>
            </template>
            <delete-outlined :style="{fontSize: '16px'}" @click="delDataS_"/>
          </a-tooltip>

          <a-tooltip placement="top">
            <template #title>
              <span>设 置</span>
            </template>
            <setting-outlined :style="{fontSize: '16px'}" class="_magl14"/>
          </a-tooltip>

          <a-tooltip placement="top">
            <template #title>
              <span>全 屏</span>
            </template>
            <fullscreen-outlined :style="{fontSize: '16px'}" class="_magl14" @click="fullScreen"/>
          </a-tooltip>

        </div>

        <!--表格-->
        <a-table :defaultExpandedRowKeys="table.menuDefaultOpen"
                 rowKey="id" :columns="table.defColumn" :data-source="table.defData"
                 :pagination="false">

          <template #bodyCell="{ text, record, index, column  }">

            <template v-if="column.dataIndex === 'name'">
              <a-tag color="blue">{{ text }}</a-tag>
            </template>

            <template v-if="column.dataIndex === 'action'">
              <a @click="openEdit_(record,'menu')">菜单</a>
              <a-divider type="vertical"/>
              <a @click="openEdit_(record,'res')">权限</a>
              <a-divider type="vertical"/>
              <a @click="openEdit_(record,'edit')">编辑</a>
              <a-divider type="vertical"/>
              <a-popconfirm placement="bottom" ok-text="确定" cancel-text="取消" @confirm="delDat(record)">
                <template #title>
                  <p>是否执行删除操作</p>
                </template>
                <a>删除</a>
              </a-popconfirm>
              <a-divider type="vertical"/>
              <a @click="openEdit_(record,'copy')">复制</a>
            </template>

          </template>

          <template #expandedRowRender="{ record }">
            <template v-if="record.menuFunCheckList &&record.menuFunCheckList.length>0">
              <a-row>
                <a-col v-for=" (item,index) in record.menuFunCheckList" :span="12" style="height: 40px">
                  <a-row>
                    <a-col :span="3">
                      {{ item.name }}
                    </a-col>
                    <a-tag v-for=" (fun,index) in item.menu_fun" color="cyan">{{ fun.name }}</a-tag>
                  </a-row>
                </a-col>
              </a-row>
            </template>
          </template>

        </a-table>

        <!--分页-->
        <a-pagination
            show-quick-jumper
            show-size-changer
            :size="page.type"
            v-model:current="page.current"
            :total="page.total"
            :page-size="page.size"
            :page-size-options="page.options"
            :show-total="total => `共 ${total} 条`"
            @showSizeChange="page.onShowSizeChange"
            @change="page.defChange"
            class="_table_page_"/>

        <!--新增Dialog-->
        <a-modal
            v-model:visible="show.insertDialog"
            title="新增角色"
            width="900px"
            :destroyOnClose="true"
            :maskClosable="false"
        >

          <!--新增表单-->
          <a-form
              ref="defForm"
              :model="form.defData"
              :rules="form.defRules"
              :label-col="form.defLC"
              :wrapper-col="form.defWC"
              class="go_shadow go_radius">

            <a-form-item label="唯一ID" name="id">
              <a-input-number class="_300w" v-model:value="form.defData.id" :min="1" placeholder="请输入角色唯一ID"
                              :max="9999999999999999999"/>
            </a-form-item>

            <a-form-item label="角色名称" name="name">
              <a-input class="_300w" v-model:value="form.defData.name" placeholder="请输入角色名称" :allowClear="true"/>
            </a-form-item>

            <a-form-item label="排序" name="sort">
              <a-input-number class="_300w" v-model:value="form.defData.sort" :min="1" :max="99999"/>
            </a-form-item>

            <a-form-item label="描述信息" name="des">
              <a-textarea show-count :maxlength="200" v-model:value="form.defData.des" placeholder="请输入描述信息" :rows="3"/>
            </a-form-item>

          </a-form>

          <!--底部按钮-->
          <template #footer>
            <a-button @click="show.insertDialog = false">取消</a-button>
            <a-button class="_magl10" @click="()=>{resetForm_('defForm')}">重置</a-button>
            <a-button class="_magl10" type="primary" @click="addDat()">保存</a-button>
          </template>

        </a-modal>

        <!--编辑权限-->
        <a-modal
            v-model:visible="show.editRoleApi"
            title="角色权限"
            width="900px"
            :destroyOnClose="true"
            :maskClosable="false">

          <!--遍历复选框-->
          <template v-for=" item in check.role.options">

            <!--          <template v-if="item.menu_fun && item.menu_fun.length >0 ">-->
            <template v-if="item.menu_fun">

              <!--标题-->
              <a-checkbox
                  v-model:checked="check.role.checkAll[item.id]"
                  :indeterminate="check.role.indeterminate[item.id]"
                  @change="(itemEvent)=>{checkAllChange(item,itemEvent.target.checked)}"
                  style="font-size: 16px;">
                {{ item.name }}
              </a-checkbox>
              <br>

              <!--数组内容-->
              <a-checkbox-group v-model:value="check.role.checkedList[item.id]">
                <template v-for=" fun in item.menu_fun">
                  <a-checkbox
                      :value="fun.id"
                      @change="(eEvent)=>{checkItemChange(fun,item,eEvent.target.checked)}"
                      style="font-size: 12px;margin-left: 0;margin-right: 10px">
                    {{ fun.name }}
                  </a-checkbox>
                </template>
              </a-checkbox-group>

              <a-divider/>

            </template>

          </template>

          <!--底部按钮-->
          <template #footer>
            <a-button @click="show.editRoleApi = false">取消</a-button>
            <a-button class="_magl10" type="primary" @click="editDat('res')">保存</a-button>
          </template>
        </a-modal>

        <!--编辑菜单-->
        <a-modal
            v-model:visible="show.editRoleMenu"
            title="角色菜单"
            width="1000px"
            :destroyOnClose="true"
            :maskClosable="false">

          <!--表格选项-->
          <a-input v-model:value="this.form.editMenuSearch" placeholder="输入菜单名称/访问地址进行模糊搜索" @pressEnter="searchMenu"
                   style="margin-bottom: 20px">
            <template #addonAfter>
              <search-outlined class="mHand" @click="searchMenu"/>
            </template>
          </a-input>

          <!--表格-->
          <a-table rowKey="id"
                   :defaultExpandedRowKeys="table.menuDefaultOpen"
                   :columns="table.menuColumn" :data-source="table.menuData" :pagination="false"
                   :rowSelection="{checkStrictly:false,selectedRowKeys:table.menuSelectKey,  onChange:menuChange_,onSelect:menuSelect_,onSelectAll:menuSelectAll_}">
            <template #bodyCell="{ text, record, index, column  }">

              <template v-if="column.dataIndex === 'name'">
                <component :is="$icons[record.icon]"
                           style="border: 1px solid #EEEEEE; border-radius: 999px;padding: 5px;font-size: 20px;margin-right: 5px"/>
                <span>{{ text }}</span>
              </template>

              <template v-if="column.dataIndex === 'level'">
                <a-tag
                    :color="getLevelColor(text)"
                    :style="{borderRadius: '100px'}">{{ text }}
                </a-tag>
              </template>

              <template v-if="column.dataIndex === 'path'">
                <span v-if="text">{{ text }}</span>
                <span v-else>#</span>
              </template>


              <template v-if="column.dataIndex === 'type'">
                <a-tag v-if="text==0" color="blue" style="border-radius: 100px">目 录</a-tag>
                <a-tag v-if="text==1" color="green" style="border-radius: 100px">菜 单</a-tag>
              </template>


              <template v-if="column.dataIndex === 'menu_is_show'">
                <a-tag v-if="text==0" color="blue" style="border-radius: 100px">展 示</a-tag>
                <a-tag v-if="text==1" color="orange" style="border-radius: 100px">隐 藏</a-tag>
              </template>

            </template>

          </a-table>

          <!--底部按钮-->
          <template #footer>
            <a-button @click="show.editRoleMenu = false">取消</a-button>
            <a-button class="_magl10" type="primary" @click="editDat('menu')">保存</a-button>
          </template>
        </a-modal>

        <!--编辑Dialog-->
        <a-modal
            v-model:visible="show.editDialog"
            title="编辑角色信息"
            width="900px"
            :destroyOnClose="true"
            :maskClosable="false">

          <!--编辑表单-->
          <a-form
              ref="defForm"
              :model="form.defData"
              :rules="form.defRules"
              :label-col="form.defLC"
              :wrapper-col="form.defWC"
              class="go_shadow go_radius">

            <a-form-item label="唯一ID" name="id">
              <a-input-number disabled class="_500w" v-model:value="form.defData.id" :min="1" placeholder="请输入角色唯一ID"/>
            </a-form-item>

            <a-form-item label="角色名称" name="name">
              <a-input class="_500w" v-model:value="form.defData.name" placeholder="请输入角色名称" :allowClear="true"/>
            </a-form-item>

            <a-form-item label="排序" name="sort">
              <a-input-number class="_500w" v-model:value="form.defData.sort" :min="1" :max="99999"/>
            </a-form-item>

            <a-form-item label="描述信息" name="des">
              <a-textarea show-count :maxlength="200" class="_500w" v-model:value="form.defData.des"
                          placeholder="请输入描述信息"
                          :rows="3"/>
            </a-form-item>

          </a-form>

          <!--底部按钮-->
          <template #footer>
            <a-button @click="show.editDialog = false">取消</a-button>
            <a-button class="_magl10" @click="()=>{resetForm_('defForm')}">重置</a-button>
            <a-button class="_magl10" type="primary" @click="editDat('edit')">保存</a-button>
          </template>
        </a-modal>

        <!--复制Dialog-->
        <a-modal
            v-model:visible="show.copyDialog"
            title="复制并创建新角色"
            width="900px"
            :destroyOnClose="true"
            :maskClosable="false">

          <!--编辑表单-->
          <a-form
              ref="defForm"
              :model="form.defData"
              :rules="form.defRules"
              :label-col="form.defLC"
              :wrapper-col="form.defWC"
              class="go_shadow go_radius">

            <a-form-item label="唯一ID" name="id">
              <a-input-number class="_500w" v-model:value="form.defData.id" :min="1" placeholder="请输入角色唯一ID"/>
            </a-form-item>

            <a-form-item label="角色名称" name="name">
              <a-input class="_500w" v-model:value="form.defData.name" placeholder="请输入角色名称" :allowClear="true"/>
            </a-form-item>

            <a-form-item label="排序" name="sort">
              <a-input-number class="_500w" v-model:value="form.defData.sort" :min="1" :max="99999"/>
            </a-form-item>

            <a-form-item label="描述信息" name="des">
              <a-textarea show-count :maxlength="200" class="_500w" v-model:value="form.defData.des"
                          placeholder="请输入描述信息"
                          :rows="3"/>
            </a-form-item>

          </a-form>

          <!--底部按钮-->
          <template #footer>
            <a-button @click="show.copyDialog = false">取消</a-button>
            <a-button class="_magl10" @click="()=>{resetForm_('defForm')}">重置</a-button>
            <a-button class="_magl10" type="primary" @click="editDat('copy')">保存</a-button>
          </template>
        </a-modal>
    </div>
  </div>
</template>

<script>

import {createVNode, defineComponent} from 'vue';
import screenfull from "screenfull";
import {Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import Icon from "@/common/component/Icon.vue";
import Breadcrumb from "@/common/layout/Breadcrumb.vue";

export default defineComponent({
  name: 'SysRole',

  components: {Breadcrumb, Icon},

  mounted() {
    //////////console.log(this.$route.path, ">>>>>>mounted")

    this.queryPage_()

    //全局监听-刷新
    this.$event.$on('refresh', (data) => {
      if ('/system/role' == data['path']) {
        //////////console.log(this.$route.path, ">>>执行刷新界面>>>", data)
      }
    })

  },

  data() {
    return {
      //分页
      page: {
        current: 1,
        size: 10,
        total: 10,
        options: ['10', '30', '50', '100', '200', '500'],
        type: 'small',
        onShowSizeChange: (current, pageSize) => {
          this.page.current = current;
          this.page.size = pageSize;
          this.queryPage_()
        },
        defChange: (current) => {
          this.page.current = current
          this.queryPage_()
        }
      },
      //开关
      show: {
        //
        editRoleMenu: false,
        editRoleApi: false,
        insertDialog: false,
        editDialog: false,
        copyDialog: false,
        openMenuFun: false,
      },
      //表格
      table: {
        defData: [],
        defColumn: [
          {title: '唯一ID', dataIndex: 'id', align: 'center', width: 100},
          {title: '角色名', dataIndex: 'name', align: 'center'},
          {title: '描述信息', dataIndex: 'des', align: 'center'},
          {title: '操作', dataIndex: 'action', align: 'center', width: 350},
        ],
        defSelectKey: [],
        defSelectRow: [],
        defSize: 'middle',
        menuData: [],
        menuColumn: [
          {title: '菜单名称', dataIndex: 'name'},
          {title: '访问地址', dataIndex: 'path'},
          {title: '类型', dataIndex: 'type', align: 'center', width: 130},
          {title: '状态', dataIndex: 'menu_is_show', align: 'center', width: 130},
          {title: '层级', dataIndex: 'level', align: 'center', width: 100},
        ],
        menuDefaultOpen: [],
        menuSelectKey: [],
        menuSelectRow: [],
        menuSize: 'medium',//medium / small / mini
      },
      //表单
      form: {
        defData: {},
        defRules: {
          id: [
            {
              type: 'any',
              required: true,
              message: '必填项',
              trigger: 'blur',
            },
          ],
          sort: [
            {
              type: 'any',
              required: true,
              message: '必填项',
              trigger: 'blur',
            },
          ],
          name: [
            {
              type: 'any',
              required: true,
              message: '必填项',
              trigger: 'blur',
            },
          ],
        },
        defLC: {span: 4},
        defWC: {span: 16},
        defSearch: {
          role_name: "",
          des: "",
        },
        defSearchRules: {},
        //(初始化/重置)Data
        defResetData: {
          id: undefined,
          name: undefined,
          des: undefined,
          sort: 100,
        },
        //搜索菜单
        editMenuSearch: '',
      },
      //自动完成
      auto: {
        role_name: [],
        menu_name: [],
        res_name: [],
      },
      //
      check: {
        role: {
          options: [],
          checkAll: {},
          checkedList: {},
          indeterminate: {},
        }
      }
    };
  },

  methods: {
    checkAllChange(item, isChecked) {
      //////console.log(item)
      //////console.log(isChecked)
      //全选
      if (isChecked) {
        let array = []
        if (item.menu_fun) {
          item.menu_fun.filter((e) => {
            array.push(e.id)
          })
          this.check.role.checkAll[item.id] = true
          this.check.role.checkedList[item.id] = array
          this.check.role.indeterminate[item.id] = false;
        }
      }
      //反选
      if (!isChecked) {
        this.check.role.checkAll[item.id] = false
        this.check.role.checkedList[item.id] = []
        this.check.role.indeterminate[item.id] = false;
      }
    },
    checkItemChange(fun, item, isChecked) {
      //////console.log(fun)
      //////console.log(item)
      //////console.log(isChecked)
      let array = []

      //还原
      if (this.check.role.checkedList[item.id] && this.check.role.checkedList[item.id].length > 0) {
        array = JSON.parse(JSON.stringify(this.check.role.checkedList[item.id]))
      }

      //勾选
      if (isChecked) {
        array.push(fun.id)
      }

      //反选
      if (!isChecked) {
        let index = array.indexOf(fun.id);
        array.splice(index, 1);
      }

      this.check.role.checkedList[item.id] = array;

      //////console.log(array)

      //修改状态
      //没选
      if (array.length == 0) {
        this.check.role.checkAll[item.id] = false
        this.check.role.indeterminate[item.id] = false;
      }

      //部分选中
      if (array.length > 0 && array.length < item.menu_fun.length) {
        this.check.role.checkAll[item.id] = false
        this.check.role.indeterminate[item.id] = true;
      }

      //全部选中
      if (array.length > 0 && array.length == item.menu_fun.length) {
        this.check.role.checkAll[item.id] = true
        this.check.role.indeterminate[item.id] = false;
      }
      //
    },
    queryPage_() {
      let param = {
        ...this.page,
        ...this.form.defSearch
      }
      this.$http.post('/system/role/page', param).then((res) => {
        if (res.status) {
          this.page.current = res.current * 1
          this.page.size = res.size * 1
          this.page.total = res.total * 1
          this.table.defData = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    //自动完成查询
    searchAsync_(str, type) {
      // //////////////console.log("searchAsync_---" + str + '---' + type)
      this.$http.post('/system/role/searchInput', {[type]: str}).then((res) => {
        this.auto[type] = res.data
        //////////////console.log(this.auto)
      })
    },
    //input异步查询-点击事件
    searchSelect_(value, type, item) {
      this.form.defSearch[type] = value
    },
    //打开新增
    openAdd_(obj) {
      this.show.insertDialog = true
      this.defResetData()

      //随便任意层级新增
      if (!obj) {
        return
      }

      //添加到指定父级之下
      let row = JSON.parse(JSON.stringify(obj))
      //////////////console.log(row)
      this.form.defData.sort = row.sort * 1 + 10;
    },
    //打开编辑
    openEdit_(obj, type) {
      let row = JSON.parse(JSON.stringify(obj))
      this.form.defData = row;

      //查询菜单情况
      if (type === 'menu') {
        this.$http.post("/system/role/roleMenu", {roleId: row.id}).then((res) => {
          if (res.status) {
            this.table.menuData = this.$kit.getTree(res.data.menuList)
            this.table.menuSelectKey = res.data.roleMenuIds
            let menuDefaultOpen = []
            res.data.roleMenu.filter(e => menuDefaultOpen.push(...JSON.parse(e.ids)))
            this.table.menuDefaultOpen = menuDefaultOpen

            this.show.editRoleMenu = true

          } else {
            this.$message.warning(res.message)
          }
        })
      }

      //查询权限情况
      if (type === 'res') {
        this.show.editRoleApi = true

        this.$http.post("/system/role/roleMenuFun", {roleId: row.id}).then((res) => {
          if (res.status) {

            this.check.role.defaultCheckId = res.data.checkId
            //全部数据
            this.check.role.options = res.data.menuFunList;

            //
            let checkId = res.data.checkId
            let options = this.check.role.options;

            for (const key in options) {
              let item = options[key]
              //先反选清空状态
              this.checkAllChange(item, false)

              for (const cKey in item.menu_fun) {
                let fun = item.menu_fun[cKey];
                ////console.log(fun)
                let check = checkId.indexOf(fun.id) != -1

                if (check) {
                  this.checkItemChange(fun, item, true)
                }
              }
            }
          } else {
            this.$message.warning(res.message)
          }
        })
      }

      //查询角色信息
      if (type === 'edit') {
        this.form.defData = row;
        this.show.editDialog = true
      }

      //查询角色信息
      if (type === 'copy') {
        this.form.defData.copy_id = row.id;
        this.form.defData.id = null;
        this.show.copyDialog = true
      }

    },
    //执行新增
    addDat() {
      this.$refs.defForm
          .validate()
          .then(() => {
            this.$http.post("/system/role/add", this.form.defData).then((res) => {
              if (res.status) {
                this.$message.success(res.message)
                this.queryPage_()
              } else {
                this.$message.warning(res.message)
              }
              this.show.insertDialog = false
            })
          })
          .catch(error => {
            //////////////console.log('error', error);
          });
    },
    //执行编辑
    editDat(type) {

      //编辑菜单
      if (type === 'menu') {

        //检查
        if (this.table.menuData.length == 0) {
          this.$message.warning("操作失败：数据不存在，无法执行操作")
          return
        }

        let deleteId = this.$kit.getTreeIds(this.table.menuData, 'id', 'children');
        // //////////////console.log(deleteId)
        // //////////////console.log(this.table.menuSelectKey)

        //提交
        this.$http.post("/system/role/editRoleMenu", {
          roleId: this.form.defData.id,
          deleteId: deleteId,
          checkId: this.table.menuSelectKey
        }).then(res => {
          if (res.status) {
            this.$message.success(res.message)
            this.queryPage_()
          } else {
            this.$message.warning(res.message)
          }
          this.show.editRoleMenu = false
        })
      }

      //编辑权限
      if (type === 'res') {

        //当前已选中权限
        let checkedList = this.check.role.checkedList
        let funIds = [];
        if (checkedList) {
          for (const index1 in checkedList) {
            if (checkedList[index1].length > 0) {
              for (const index2 in checkedList[index1]) {
                funIds.push(checkedList[index1][index2])
              }
            }
          }
        }

        //////console.log(funIds)

        //提交
        this.$http.post("/system/role/editRoleMenuFun", {roleId: this.form.defData.id, funIds: funIds}).then(res => {
          if (res.status) {
            this.$message.success(res.message)
            this.queryPage_()
          } else {
            this.$message.warning(res.message)
          }
          this.show.editRoleApi = false
        })

      }

      //编辑角色信息
      if (type === 'edit') {
        this.$refs.defForm
            .validate()
            .then(() => {
              this.$http.post("/system/role/edit", this.form.defData).then((res) => {
                if (res.status) {
                  this.$message.success(res.message)
                  this.queryPage_()
                } else {
                  this.$message.warning(res.message)
                }
                this.show.editDialog = false
              })
            })
            .catch(error => {
              //////////////console.log('error', error);
            });
      }

      //复制角色信息
      if (type === 'copy') {
        this.$refs.defForm
            .validate()
            .then(() => {
              this.$http.post("/system/role/copyAndAdd", this.form.defData).then((res) => {
                if (res.status) {
                  this.$message.success(res.message)
                  this.queryPage_()
                } else {
                  this.$message.warning(res.message)
                }
                this.show.copyDialog = false
              })
            })
            .catch(error => {
              //////////////console.log('error', error);
            });
      }

    },
    //执行删除
    delDat(obj) {
      let row = JSON.parse(JSON.stringify(obj))
      this.$http.post("/system/role/del", {ids: [row.id]}).then((res) => {
        if (res.status) {
          this.$message.success(res.message)

          this.queryPage_()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    delDataS_() {
      if (this.table.defSelectKey.length === 0) {
        this.$message.warn("请至少勾选一项", 1)
        return
      }

      Modal.confirm({
        title: '是否确定删除?',
        icon: createVNode(ExclamationCircleOutlined),
        content: `已勾选${this.table.defSelectKey.length}条数据`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          this.$http.post("/system/role/del", {ids: this.table.defSelectKey}).then((res) => {
            if (res.status) {
              this.$message.success(res.message)
              this.queryPage_()
            } else {
              this.$message.warning(res.message)
            }
          })
        },
        onCancel: () => {
          this.$message.warning("操作已取消", 1)
        },
      });

    },
    //重置表单
    resetForm_(formName) {
      if (this.$refs[formName]) {
        this.$refs[formName].resetFields()
      }
    },
    //初始化表单
    defResetData() {
      this.form.defData = JSON.parse(JSON.stringify(this.form.defResetData))
    },
    //表格多选
    defChange_(selectedRowKeys, selectedRows) {
      this.table.defSelectKey = selectedRowKeys
      this.table.defSelectRow = selectedRows
      //////////////console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    defSelect_(record, selected, selectedRows) {
    },
    defSelectAll_(selected, selectedRows, changeRows) {
    },
    //表格多选
    menuChange_(selectedRowKeys, selectedRows) {
      this.table.menuSelectKey = selectedRowKeys
      this.table.menuSelectRow = selectedRows
      //////////////console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    menuSelect_(record, selected, selectedRows) {
    },
    menuSelectAll_(selected, selectedRows, changeRows) {
    },
    //全屏
    fullScreen() {
      let element = document.getElementById("fullscreen")
      if (screenfull.isEnabled) {
        screenfull.request(element)
      }
      screenfull.toggle()
    },
    searchMenu() {
      let param = {
        type: 'selectRole',
        name: this.form.editMenuSearch,
        path: this.form.editMenuSearch,
      }
      //////////////console.log(param)
      this.$http.post('/system/menu/page', param).then((res) => {
        if (res.status) {
          this.table.menuData = this.$kit.getTree(res.data)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    getLevelColor(text) {
      if (text == 1) return '#006d75'
      if (text == 2) return '#13c2c2'
      if (text == 3) return '#52c41a'
      if (text == 4) return '#69c0ff'
      return '#bae7ff'
    },
    //表格多选
    resRowSelection_() {
      return {
        type: "checkbox",
        checkStrictly: true,
        preserveSelectedRowKeys: true,
        selectedRowKeys: this.table.res.selectKey,
        onChange: (selectedRowKeys, selectedRows) => {
          this.table.res.selectKey = selectedRowKeys
          this.table.res.selectRow = selectedRows
        },
        onSelect: (record, selected, selectedRows) => {
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
        },
        onSelectInvert: (selectedRows) => {
        },
        onSelectNone: () => {
        },
      }
    },
    //表格单击事件
    defClickRow(record) {
      const selectedRowKeys = [...this.table.def.selectKey];
      const selectedRows = [...this.table.def.selectRow];

      //单选
      if (this.type == 'radio') {
        this.table.def.selectKey = [record.id]
        this.table.def.selectRow = [record]
        return
      }

      //复选
      if (selectedRowKeys.indexOf(record.id) >= 0) {
        selectedRowKeys.splice(selectedRowKeys.indexOf(record.id), 1);
        selectedRows.splice(selectedRowKeys.indexOf(record.id), 1);
      } else {
        selectedRowKeys.push(record.id);
        selectedRows.push(record);
      }
      this.table.def.selectKey = selectedRowKeys;
      this.table.def.selectRow = selectedRows;
      //////console.log(selectedRowKeys.length)
      //////console.log(selectedRows.length)
    },
    //表格单击事件
    defCustomRow(record) {
      return {
        onClick: () => {
          this.defClickRow(record);
        },
      };
    },
  }

})
</script>

<style lang="less">

</style>

<style scoped lang="less">

</style>
